<template>
    <div id="container"></div>
</template>

<script setup>
import { nextTick, onMounted } from 'vue';
import { lineLayerData } from './lineLayerData';
import { POIS, POIS2, DISTRICT, REGION, REGION2 } from './pois'
onMounted(() => {
    nextTick(() => {
        initMap()
    })
})

const initMap = () => {
    let map = new BMapGL.Map('container'); //创建地图实例
    let point = new BMapGL.Point(116.404, 39.925); //地图中心点
    map.centerAndZoom(point, 15); //地图初始化，同时设置地图展示级别
    map.enableScrollWheelZoom(true); //使用鼠标滚轮控制缩放
    // map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为地球模式
    // 创建点标记
    let marker = new BMapGL.Marker(point);
    map.setMapStyleV2({
        styleId: '0d8046684d4a29349340742d5f4e16e7'
    });
    map.addOverlay(marker);
    // 创建信息窗口
    let opts = {
        width: 200,
        height: 100,
        title: '故宫博物院'
    };
    let infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
    // 点标记添加点击事件
    marker.addEventListener('click', function () {
        map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });

    // 图层示例
    let lineLayer = null;
    // 添加图层
    const addLineLayer = () => {
        fetch("https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/lineLayerData.json").then(res => {
            return res.json();
        }).then(testLineData => {
            if (!lineLayer) {
                lineLayer = new BMapGL.LineLayer({
                    enablePicked: true,
                    autoSelect: true,
                    pickWidth: 30,
                    pickHeight: 30,
                    selectedColor: 'yellow', // 选中项颜色
                    style: {
                        // borderMask: false,
                        // borderColor: 'rgba(27, 142, 236, .6)',
                        // borderWeight: 2,
                        strokeWeight: 3,
                        strokeStyle: 'solid',
                        strokeColor: [
                            'case', ['boolean', ['feature-state', 'picked'], false],
                            '#6704ff', ['match', ['get', 'name'],
                                'demo1', '#ddb73a',
                                'demo2', '#2cd642',
                                'demo3', '#e12b28', '#6704ff']],
                    }
                });
            }
            lineLayer.addEventListener('click', function (e) {
                if (e.value.dataIndex !== -1 && e.value.dataItem) {
                    console.log('click', e.value.dataItem);
                    // 使用样式配置，实现单选效果
                    // this.updateState(e.value.dataIndex, { picked: true })
                }
            })
            lineLayer.setData(testLineData);
            map.addNormalLayer(lineLayer);
        })
    }
    addLineLayer();

    // 聚合数据示例
    let cluster = null;
    // 添加聚合数据
    const addCluster = () => {
        if (cluster) {
            return;
        }
        cluster = new Cluster.View(map);
        cluster.on(Cluster.ClusterEvent.CLICK, (e) => {
            console.log('ClusterEvent.CLICK', e);
        });
        cluster.on(Cluster.ClusterEvent.MOUSE_OVER, (e) => {
            console.log('ClusterEvent.MOUSEOVER', e);
        });
        cluster.on(Cluster.ClusterEvent.MOUSE_OUT, (e) => {
            console.log('ClusterEvent.MOUSEOUT', e);
        });
        let points = Cluster.pointTransformer(POIS, function (data) {
            return {
                point: [data.location.lng, data.location.lat],
                properties: {
                    name: data.name,
                    address: data.address,
                    province: data.province,
                    city: data.city,
                    area: data.area
                }
            }
        });
        cluster.setData(points);
    }
    addCluster();
}

</script>

<style>
#container {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    font-family: "微软雅黑";
}

.bmap_cpyctrl {
    display: none;
}

.anchorbl {
    display: none;
    /* border: 1px solid; */
}
</style>